<template>
	<view class="presenter">
		<!-- <view class="goods_image_box w100">
			<image class="w100 h100" :src="productDetail.image_src" mode=""></image>
		</view> -->
		<view class="" style="width: 750rpx; height: 750rpx">
			<swiper style="width: 750rpx; height: 750rpx; margin: 0 auto" :autoplay="true" :circular="true">
				<!-- <swiper-item style="width: 750rpx;height: 750rpx;font-size: 0;"  v-for="(item,index) in productDetail.images_src">
						<image :src="item" style="width: 750rpx;height: 750rpx;"></image>
				</swiper-item> -->
				<swiper-item style="width: 750rpx; height: 750rpx; font-size: 0" v-if="!isVideo" v-for="(item, index) in productDetail.images_src" :key="index">
					<image :src="item" style="width: 750rpx; height: 750rpx"></image>
				</swiper-item>
				<swiper-item style="width: 750rpx; height: 750rpx; font-size: 0" v-if="isVideo">
					<video class="w100 h100" show-mute-btn="true" :controls="controls" enable-play-gesture="true" :src="selectVal.video"></video>
				</swiper-item>
			</swiper>

			<view class="shipin_txt fblod s20 familytow txtali" @click="isVideo = true">视频</view>
			<view class="shipintwo_txt fblod s20 familytow txtali" @click="isVideo = false">图片</view>
		</view>
		<view class="goods_detail_box w100">
			<view class="flex align-center justify-between">
				<view class="">
					<view class="goods_price mar s48 familytow fblod">
						<text class="s32 familytow fblod" style="color: #ff3f4a">￥</text>
						{{ selectVal.price || 0 }}
					</view>
					<view class="zk_txt mar s26 family f500">选择该产品享{{ productDetail.discount / 10 }}折</view>
				</view>
				<!-- <view class="tianjia_box flexjus">
					<view class="jian_box" @click.stop="jianNum">
						<view class="jian_txt"></view>
					</view>
					<view class="num s28 family f500 txtali">
						{{number}}
					</view>
					<view class="jia_box txtali s40" @click.stop="jiaNum">
						+
					</view>
				</view> -->
			</view>
			<view class="goods_name mar s32 familytow fblod">
				{{ selectVal.difference ? selectVal.difference : '' }}
				{{ productDetail.name }}
			</view>
		</view>
		<view class="goods_detail_bot">
			<view class="detail_title s28 familytow fblod">商品详情</view>
			<rich-text :nodes="productDetail.detail" class="rich_txt"></rich-text>
		</view>
		<view class="flex justify-center" style="padding: 12rpx 0; width: 100%; position: fixed; bottom: 0">
			<view
				@click="confirm"
				class="flex align-center justify-center"
				style="width: 684rpx; height: 86rpx; background: #ebbe87; border-radius: 43rpx; font-size: 28rpx; color: #ffffff"
			>
				确定
			</view>
		</view>
		<uni-popup ref="lockPopup" type="bottom" :isbottom="true">
			<view class="flex flex-column" style="width: 750rpx; height: 992rpx; background: #ffffff; border-top: 1rpx solid transparent">
				<view class="flex align-end" style="margin-top: -60rpx; margin-bottom: 52rpx">
					<!-- 	<view v-if="(attrs.value[index].image.indexOf('http')!=-1)" class="" style="font-size: 0;margin-left: 24rpx;margin-right: 34rpx;">
						<image style="width: 208rpx;height: 208rpx;background: #f2f2f2;border-radius: 8rpx;" :src="attrs.value[index].image" mode=""></image>
					</view> -->
					<view class="" style="font-size: 0; margin-left: 24rpx; margin-right: 34rpx">
						<image style="width: 208rpx; height: 208rpx; background: #f2f2f2; border-radius: 8rpx" :src="selectVal.thumbnail" mode=""></image>
					</view>
					<view class="flex">
						<view class="flex-1">
							<view class="" style="font-size: 24rpx; color: #e4493a">￥{{ selectVal.price || 0 }}</view>
							<view class="" style="font-size: 24rpx; color: #666; min-width: 360rpx; min-height: 68rpx">【已选】{{ selectVal.difference || '' }},数量{{ number }}</view>
						</view>
						<view @click="closePoup" class="" style="font-size: 0; margin: 0 30rpx">
							<image style="width: 32rpx; height: 32rpx" src="@/static/shopping/cha.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="flex-1" style="overflow-y: scroll">
					<view class="" style="padding-left: 20rpx">
						<view class="" style="font-size: 28rpx; color: #333; margin-bottom: 24rpx">
							{{ productDetail.spu[0].name }}
						</view>
						<view class="flex flex-wrap" style="">
							<view
								v-for="(items, indexss) in productDetail.sku"
								@click="selectedSku(items)"
								:style="selectId == items.id ? 'background:#EBBE87;color:#fff;' : 'background: rgba(0, 0, 0, 0.1);color:#666;'"
								style="margin-right: 27rpx; margin-bottom: 28rpx; padding: 14rpx 32rpx; font-size: 28rpx; border-radius: 8rpx"
							>
								{{ items.difference }}
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-between" style="padding-left: 20rpx">
					<view class="" style="font-size: 28rpx; color: #333; margin-bottom: 24rpx">数量</view>
					<view class="tianjia_box flexjus" style="margin-top: 0">
						<view class="jian_box" @click.stop="jianNum">
							<view class="jian_txt"></view>
						</view>
						<view class="num s28 family f500 txtali">
							{{ number }}
						</view>
						<view class="jia_box txtali s40" @click.stop="jiaNum">+</view>
					</view>
				</view>
				<view class="" style="height: 110rpx"></view>
				<view class="flex justify-center" style="padding: 12rpx 0; margin-bottom: 40rpx">
					<view
						@click="confirm2"
						class="flex align-center justify-center"
						style="width: 684rpx; height: 86rpx; background: #ebbe87; border-radius: 43rpx; font-size: 28rpx; color: #ffffff"
					>
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import graPhic from '@/components/graphic.vue';
export default {
	components: {
		graPhic
	},
	data() {
		return {
			id: 0,
			productDetail: {},
			number: 1,
			index: 0,
			attrs: {},
			oldprice: 0,
			total: 0,
			selectId: '',
			selectVal: {},
			isVideo: false
		};
	},
	onLoad(options) {
		console.log(options);
		this.attrs = this.$store.state.give;
		this.id = options.id;
		this.selectId = options.sku_id;
		this.number = options.number;
		this.index = options.index;
		this.oldprice = this.oldprice.toFixed(2);
		this.getDetail();
	},
	methods: {
		handleStr(str) {
			return str.split(',');
		},
		jianNum() {
			if (this.number <= 0) {
				uni.showToast({
					title: '数量不能小于0',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			if (this.prePage().checkmoney(this.index)) {
				uni.showToast({
					title: '服务项价格大于套系设置价格，无法取消',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			this.prePage().jianNum(this.number, this.index, 'yes', this.productDetail);
			this.number--;
		},
		jiaNum() {
			this.prePage().jiaNum(this.number, this.index, 'yes', this.productDetail);
			this.number++;
		},

		confirm() {
			uni.navigateBack();
		},
		confirm2() {
			console.log('confirm2');
			if (this.number < 1) {
				uni.showToast({
					title: '数量不能为0',
					icon: 'none',
					duration: 2000
				});
				return false;
			}

			uni.navigateBack({
				delta: 1
			});
		},
		closePoup() {
			this.$refs.lockPopup.close();
		},
		getDetail() {
			this.$request({
				url: 'package/getProductDetail',
				data: {
					id: this.id
				}
			}).then((res) => {
				res.data.data.detail = res.data.data.detail.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
					var img = `<img style="display: block; width: 100%;" src="${capture}">`;
					return img;
				});
				this.productDetail = res.data.data;
				this.productDetail.sku.map((item, index) => {
					if (item.id == this.selectId) {
						this.selectVal = item;
					}
				});
				if (this.selectVal.image_src) {
					this.productDetail.images_src.unshift(this.selectVal.image_src);
				}
			});
		},
		getPrice(priceList) {
			let nowSpc = this.attrs.value[this.index].spec_arr.join(',');
			let priceArr = priceList.filter((item) => item.difference == nowSpc);
			return priceArr[0].price;
		},
		// 选择规格
		selectedSku(item, e, index2) {
			this.selectId = item.id;
			// this.prePage().attrsList.map((val, index) => {
			// 	if (val.sku.id == item.id) {
			// 		console.log('22222selectedSku')
			// 		this.selectVal = val.sku
			// 		console.log(this.selectVal)
			// 		this.index = index
			// 		this.number = val.number
			// 	}
			// })

			this.productDetail.sku.map((item, index) => {
				if (item.id == this.selectId) {
					this.selectVal = item;
				}
			});
			return;

			let seleval = [];
			this.productDetail.sku.map((item, index) => {
				if (item.difference == e) {
					seleval.push(item);
				}
			});
			this.attrs.value[this.index].selectSku = seleval;
			this.attrs.value[this.index].price = this.productDetail.sku[index2].price;
			this.attrs.value[this.index].selling_price = this.productDetail.sku[index2].selling_price;
			this.productDetail.price = this.productDetail.sku[index2].price;
			this.productDetail.selling_price = this.productDetail.sku[index2].selling_price;
			//现在总价
			this.total = Number(this.productDetail.sku[index2].selling_price) * Number(this.number);
			let change_money = Number(this.oldprice) - Number(this.total);
			change_money = change_money.toFixed(2);
			if (Number(change_money) < 0) {
				change_money = Math.abs(change_money);
				this.prePage(3).getPrice(change_money);
			} else {
				this.prePage(3).getPrice(change_money, 'jian');
			}
			this.oldprice = this.total;
			this.$forceUpdate();
		}
	}
};
</script>

<style scoped lang="scss">
// 数量加减按钮
.tianjia_box {
	width: 150upx;
	height: 36upx;
	border: 2upx solid #ebbe87;
	margin-top: 30upx;
	margin-right: 32rpx;

	.jian_box {
		width: 36upx;
		height: 36upx;
		background: #ebbe87;
		margin: 0;
		padding: 0;

		.jian_txt {
			width: 20upx;
			height: 4upx;
			background: #ffffff;
			margin: 50% auto;
		}
	}

	.num {
		line-height: 36upx;
	}

	.jia_box {
		width: 36upx;
		height: 36upx;
		background: #ebbe87;
		line-height: 32upx;
		color: #ffffff;
	}
}

.presenter {
	overflow: hidden;

	.goods_image_box {
		height: 750upx;
		background-color: #666;
	}

	.goods_detail_box {
		height: 230upx;
		background: #fff;
		overflow: hidden;

		.mar {
			margin-left: 32upx;
		}

		.goods_price {
			color: #ff3f4a;
			margin-top: 38upx;
		}

		.zk_txt {
			color: #666;
			margin-top: 10upx;
		}

		.goods_name {
			width: 684upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #000000;
			margin-top: 18upx;
		}
	}

	.goods_detail_bot {
		background-color: #fff;
		margin-top: 12upx;
		overflow: hidden;

		.detail_title {
			color: #333;
			margin-top: 30upx;
			margin-left: 32upx;
			padding-bottom: 28upx;
		}

		.rich_txt {
			width: 100%;
		}
	}
}
</style>
<style>
page {
	background: #f4f4f4;
}

.shipin_txt {
	width: 116upx;
	height: 48upx;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 21upx 21upx 21upx 21upx;
	opacity: 1;
	border: 2upx solid rgba(255, 255, 255, 0.3);
	position: absolute;
	top: 650upx;
	left: 228upx;
	color: #ffffff;
	line-height: 48upx;
}

.shipintwo_txt {
	width: 116upx;
	height: 48upx;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 21upx 21upx 21upx 21upx;
	opacity: 1;
	border: 2upx solid rgba(255, 255, 255, 0.3);
	position: absolute;
	top: 650upx;
	left: 406upx;
	color: #ffffff;
	line-height: 48upx;
}
</style>
